<template>
  <el-container class="main_con" >
    <div class="header">
      <div class="icon">
        <i class="el-sc-dingdan2"></i>
      </div>
      <div class="txt">{{itemObj.name}}</div>
    </div>
    <div class="notice" v-if="itemObj.channel">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,i) in itemObj.channel" :key="i" :label="item.channelName" :name="'p' + i">
          <noticeSetting :scene="itemObj.name" :obj="item" :redirect="itemObj.redirectUrl"></noticeSetting>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-container>
</template>

<script>
import noticeSetting from './components/noticeSetting';
export default {
  data(){
    return {
      isLoading:false,
      itemObj:{},
      activeName:'p0'
    }
  },
  components: {
    noticeSetting
  },
  created(){
    //接收列表页传递过来的数据
    if(Object.keys(this.$route.params).length){
      this.itemObj = this.$route.params;
    }else{
      this.$alert('未检测到数据传入','参数检测',{
        confirmButtonText:'确定',
        callback:a => {
          this.$router.back(-1);
        }
      });
    };
  },
  methods: {
    //tab点击
    handleClick(){
      //empty
    }
  }
}
</script>

<style lang="scss" scoped>
//覆盖样式
::v-deep .el-tabs__nav-scroll{
  padding-left: 20px;
}

.header{
  background:#DCDFE6;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  display: flex;

  .icon{
    color: #2d8cf0;

    i{
      vertical-align: middle;
      font-size: 24px;
    }
  }
  
  .txt{
    margin-left: 10px;
    font-weight: bold;
    font-size: 24px;
    color: #2d8cf0;
  }
}

.notice{
  margin-top: 20px;
  padding-top: 10px;
  background: #fff;
}
</style>